import React, { useState } from 'react'
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useNavigate, useLocation } from 'react-router-dom';


export default function Tabbars() {

    /* 底部导航栏数据 */
    const tabbarslist = [
        { title: '首页', path: '/home', icon: <HomeO /> },
        { title: '点单', path: '/diandan', icon: <HomeO /> },
        { title: '百货', path: '/store', icon: <HomeO /> },
        { title: '订单', path: '/order', icon: <HomeO /> },
        { title: '我的', path: '/my', icon: <HomeO /> },
    ]

    let navigate = useNavigate()
    let location = useLocation()
    let [change, setChange] = useState(location.pathname)

    return (
        <div>
            <div className='demo-tabbar'>
                <Tabbar value={change} onChange={(e: any) => {
                    navigate(e)
                    setChange(e)
                }}>
                    {
                        tabbarslist.map(item => {
                            return <Tabbar.Item name={item.path} icon={item.icon}>
                                {item.title}
                            </Tabbar.Item>
                        })
                    }

                </Tabbar>
            </div>
        </div>
    )
}
